<template>
    <div>
        <!-- 表单输入绑定 -->
        <input v-model="course" type="text" v-on:keydown.enter="addCourse" @input="onInput" v-focus/>
        <!-- 事件处理 -->
        <button v-on:click="addCourse">新增课程</button>
        <ClearMessage></ClearMessage>
    </div>
</template>

<script>
    import ClearMessage from './ClearMessage'
    export default {
        data() {
            return {
                course: ''
            }
        },
        components:{
            ClearMessage
        },
        methods:{
            addCourse () {
                this.$emit('add-course', this.course);
                this.course = ''
            },
            onInput () {
                // console.log(e)
            }
        }
    }
</script>

<style scoped>

</style>